<template>
  <div class="upload-list">
    <div
      class="other-img"
      @mouseover="hoverIndex = index"
      @mouseout="hoverIndex = ''"
      v-for="(item, index) in updateList"
      :key="item.id"
    >
      <div class="other-img-body">
        <el-image
          :style="index !== 0 ? 'margin' : ''"
          v-show="updateList.length !== 0"
          style="width: 148px; height: 148px"
          :src="url + item.path"
        >
        </el-image>
        <div class="update-options" v-show="hoverIndex === index">
          <div class="update-options-body">
            <div class="el-icon-zoom-in"></div>
            <div class="el-icon-delete" @click="deleteImgs(item)"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- <tea-upload :keyId.sync="imgsId" :imgType.sync="imgType" /> -->
    <el-upload
      action=""
      list-type="picture-card"
      :http-request="upload"
      :multiple="true"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="list"
      ref="uploadList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import { uploadTeaImg, deleteTeaImg } from "@/api/tea-manager";
import { mapState } from "vuex";
import TeaUpload from "./tea-upload.vue";
export default {
  components: {
    TeaUpload,
  },
  props: {
    imgType: {
      type: Number,
      default: 0,
    },
    imgsId: {
      type: Number,
      default: 0,
    },
    updateList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState({
      url: (state) => state.url,
    }),
    keyId() {
      return this.imgsId;
    },
  },
  data() {
    return {
      list: [],
      selectList: {},
      dialogVisible: false,
      dialogImageUrl: "",
      hoverIndex: "",
      uploadImgList: [],
      num: 0,
      form: {
        keyId: 0,
        imgType: 1,
      },
    };
  },
  mounted() {
    // _this = this;
  },
  watch: {
    updateList: {
      handler(newValue, oldValue) {
        console.log(newValue);
        console.log(oldValue);
      },
      deep: true,
    },
  },
  methods: {
    change(e) {
      // console.log("----------------");
      // console.log(e);
      // console.log("----------------");
    },
    deleteImgs(item) {
      const { id } = item;
      const { updateList } = this;
      this.$emit(
        "update:updateList",
        updateList.filter((_item) => item.id !== _item.id)
      );
      deleteTeaImg(id)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error("删除失败");
            return;
          }

          this.$message.success("删除成功");
        })
        .catch((err) => {
          console.log(err);
          this.$refs.uploadList.uploadFiles = [...this.list];
        });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.$refs.preview.click();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let selectList = this.selectList;
      deleteTeaImg(selectList[file.uid])
        .then((res) => {
          if (res.data.code !== 200) {
            this.$refs.uploadList.uploadFiles = [...this.list];
            this.$message.error("删除失败");
            return;
          }
          delete selectList[file.uid];
          this.selectList = selectList;
        })
        .catch((err) => {
          console.log(err);
          this.$refs.uploadList.uploadFiles = [...this.list];
        });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    clickUpload() {
      console.log(this.$refs.elUpload);
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeUpload(file) {
      // console.log(file);

      return true;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getFileIndex() {
      return this.$refs.uploadList.uploadFiles.index;
    },
    getFile(rawFile) {
      let fileList = this.uploadFiles;
      let target;
      fileList.every((item) => {
        target = rawFile.uid === item.uid ? item : null;
        return !target;
      });
      return target;
    },
    // 上传图片到OSS 同时派发一个事件给父组件监听
    upload(item) {
      let data = new FormData();
      data.append("file", item.file);
      const { imgType } = this;
      const params = {
        imgType,
      };

      this.keyId && (params.keyId = this.keyId);
      console.log(this.keyId);
      return new Promise((resolve, reject) => {
        uploadTeaImg({ data, params })
          .then((res) => {
            console.log(res);
            // if(res){
            //           this.keyId = res.data.data.keyId;
            // this.$emit("update:imgsId", this.keyId);
            // // this.$emit("on-success", res.data.data.path);
            // // this.imageUrl = res.data.data.path;
            // this.$emit("upload-success", res.data.data);
            // }
            if (res.data.code !== 200) {
              this.$refs.uploadList.uploadFiles = [...this.list];
              return;
            }
            this.$emit("update:imgsId", res.data.data.keyId);
            // this.$emit("on-success", res.data.data.path);
            // this.imageUrl = res.data.data.path;
            this.$emit("upload-success", res.data.data);
            this.list = [...this.$refs.uploadList.uploadFiles];
            this.selectList[item.file.uid] = res.data.data.id;
            resolve();
          })
          .catch((err) => {
            this.$emit("upload-error", err);
            this.$refs.uploadList.uploadFiles = [...this.list];
            reject();
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tea-upload-img {
  position: relative;
  .success {
    color: #67c23a;
  }
  .error {
    color: red;
  }
  .tips {
    font-size: 26px;
    top: 0;
    right: 0;
    position: absolute;
  }
}
.upload-list {
  // display: flex;
  .other-img {
    margin: 0 8px 8px 0;
    display: inline-block;
    .other-img-body {
      width: 148px;
      height: 148px;
      position: relative;
      cursor: pointer;
      .update-options-body {
        width: 148px;
        height: 148px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        .el-icon-delete {
          margin-left: 15px;
        }
      }
      .update-options {
        // display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 22px;
        color: #fff;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
